<template>
    <div>
      <!-- 创建导航栏，左侧有一个按钮用于触发侧边导航栏的显示 -->
      <van-nav-bar
        title="班级管理"
        @click-left="showSettingsModal = true"
        @click-right="CreateClass()"
        fixed
      >
        <template #left>
          <van-icon name="ellipsis" size="18" />
        </template>
        <template #right>
          <van-icon name="add-o" size="18" />
        </template>
      </van-nav-bar>
      <!-- 遮罩层，当弹窗显示时，它也显示 -->
      <!-- <div v-if="showSettingsModal" class="overlay" @click="hideSettingsModal"></div>   -->
      <!-- 创建侧边导航栏，使用 v-model 控制其显示与隐藏 -->
      <SettingsVue
        :isVisible="showSettingsModal"
        @close="showSettingsModal = false"
      ></SettingsVue>
  
      <!-- 点击屏幕其他地方关闭弹窗 -->
      <div
        @click.stop="hideSettingsModal"
        v-if="showSettingsModal"
        class="overlay"
      ></div>
    </div>
  </template>
  
  <script>
import SettingsVue from "./Settings.vue";
  export default {
    name: "ClassHead",
    data() {
      return {
        showSettingsModal: false,
        activeIndex: 0, // 当前激活的导航项索引
      };
    },
    methods: {
      hideSettingsModal() {
        this.showSettingsModal = false;
      },
      CreateClass() {  
      this.$router.push('CreateClass');  
    },
    },
    components: {
      SettingsVue,
    },
  };
  </script>
  
  <!-- <style scoped>  
  .overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    z-index: 998; /* 低于弹窗的z-index */  
    cursor: pointer;  
  }  
  </style> -->
  
  <style scoped>
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    z-index: 998; /* 确保遮罩在内容之下，但在弹窗之上 */
    cursor: pointer; /* 设置鼠标样式为可点击 */
  }
  </style>